<template>
  <div class="product-container">
    <Banner :p="p" />
    <Menu :p="p" />
    <MainSec :p="p" />
    <div
      class="contents"
      :style="{
        paddingLeft: p + 'vw',
        paddingRight: p + 'vw',
      }"
    >
      <ProductList />
      <AdList />
    </div>
    <Footer :p="p"/>
  </div>
</template>

<script>
import Banner from "@/components/IndexComps/Banner.vue";
import Menu from "@/components/IndexComps/Menu.vue";
import Footer from "@/components/IndexComps/Footer.vue";
import MainSec from "@/components/ProductComps/MainSec.vue";
import ProductList from "@/components/ProductComps/ProductList.vue";
import AdList from "@/components/ProductComps/AdList.vue";
export default {
  components: {
    Banner,
    Menu,
    Footer,
    MainSec,
    ProductList,
    AdList,
  },
  data() {
    return {
      p: 6,
    };
  },
};
</script>

<style lang="scss" scoped>
.product-container {
  background: #f6f6fb;
  .contents {
    display: flex;
    justify-content: space-between;
  }
}
</style>
